<template>
  <el-dialog
    :model-value="updateDialogVisible"
    :title="dialogTitle"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      :model="form"
      label-width="auto"
      :rules="rules"
      ref="ruleFormRef"
      style="max-width: 600px"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="密码 " prop="password">
        <el-input v-model="form.password" />
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="删除开关" prop="isDel">
        <div class="my-4 flex items-center text-sm">
          <el-radio-group v-model="form.isDel" class="ml-4">
            <el-radio :value="0" size="small">否</el-radio>
            <el-radio :value="1" size="small">是</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from "vue";
import { defineEmits, ref, watch } from "vue";

import { editUser } from "@/api/user.js";
const emits = defineEmits(["update:modelValue", "initGetUserList"]);

const props = defineProps({
  dialogTitle: {
    type: String,
    default: "",
  },
  rowvalue: {
    tyep: Object,
    default: () => {},
  },
});

// do not use same name with ref
const form = ref({
  name: "",
  password: "",
  age: null,
  address: "",
  isDel: null,
});
const ruleFormRef = ref(null);
const rules = ref({
  name: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 15, message: "用户名1-15", trigger: "change" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    // { min: 6, max: 20, message: "密码6-20", trigger: "change" },
  ],
  age: [{ required: false, message: "请输入年龄", trigger: "blur" }],
  address: [{ required: false, message: "请输入地址", trigger: "blur" }],
  isDel: [{ required: false, message: "请输入密码", trigger: "change" }],
});
// 处理关闭弹窗，，配合  defineEmits 使用
const handleClose = () => {
  // 调用页面的方法，需要在父页面中传入该值 配置 @initGetUserList 才能使用
  //   emits("initGetUserList");
  emits("update:modelValue", false);
};
const submit = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const res = editUser(form.value).catch((err) => {
        ElMessage({
          message: err == null ? "服务异常" : err.msg + 11,
          type: "error",
          plain: true,
        });
      });
      res.then((res) => {
        if (res.code == 200) {
          handleClose();
          emits("initGetUserList");
          ElMessage({
            message: "创建成功",
            type: "success",
            plain: true,
          });
        } else {
          const msg = res == null ? "后端服务异常" : res.msg;
          ElMessage({
            message: msg,
            type: "error",
            plain: true,
          });
        }
      });
    }
  });
};

watch(
  () => props.rowvalue,
  () => {
    form.value = props.rowvalue;
  },
  { deep: true, immediate: true }
);
</script>
